<template>
  <div class="page ff-regular">
    <div class="page-bg">
      <div class="content">
        <t-transfer-flow :imgList="imgList"></t-transfer-flow>
        <div class="shipping-address">
          <div class="shipping-title">
            <!-- <img src="@/assets/images/parcel/trans_icon.webp" class="trans-icon" alt=""> -->
            <div class="label ff-bold">{{ $t('transport.addTransshipmentOrder') }}</div>
            <!--历史转运订单和我的运单 -->
            <!-- <div class="left" v-if="userToken">
              <router-link to="transport/records" class="fun-text">{{ $t('transport.historicalTransport')
                }}</router-link>
              <router-link to="/user/order" class="fun-text">{{ $t('transport.returnMyOrder') }}</router-link>
            </div> -->
          </div>
          <!-- <Divider /> -->
          <div class="title-address ff-bold">
            <div class="title">
              <span class="setp-first">1、</span>
              {{ $t('transport.appNameAddress') }}
            </div>

            <div class="copy-btn" @click="onCopy">{{ $t('transport.copyAddress') }}</div>
          </div>
          <!-- 温馨提示 -->
          <div class="alert">
            <div>
              <Icon type="md-alert" size="14" style="margin-right:5px;" />{{ $t('transport.warmReminder') }}{{
                $t('transport.hint1', {
                  appName:
                    appName
                })
              }}
            </div>
          </div>
          <div class="current-address">
            <!-- <img :class="userToken ? 'bg-border' : 'default-bg'" src="@/assets/images/parcel/bg-border.png" alt=""> -->
            <div class="address-info" v-if="addressInfo">
              <div class="address-head ff-bold">
                <div class="top-label">{{ $t('transport.warehouseAddress') }}</div>

              </div>
              <!-- <Divider /> -->
              <Row>
                <Col span="12">
                <div class="address-item">
                  <span class="label">{{ $t('transport.addressee') }}</span>
                  <span class="value">{{ addressInfo.recipientName }}</span>
                </div>
                </Col>
                <Col span="12">
                <div class="address-item">
                  <span class="label">{{ $t('transport.contactNumber') }}</span>
                  <span class="value">+{{ addressInfo.regionCode }} {{ addressInfo.mobile }}</span>
                </div>
                </Col>
              </Row>
              <Row>
                <Col span="12">
                <div class="address-item">
                  <span class="label">{{ $t('transport.deliveryAddress') }}</span>
                  <div class="value">
                    <span>{{ addressInfo.countryCode }} {{ addressInfo.provinceText }} {{ addressInfo.cityText }}
                      {{ addressInfo.areaText }} {{ addressInfo.addressDetail }}{{ userInfo.id ? (userInfo.id.length > 8
                        ? `-u${userInfo.id.slice(-8)}` : `-u${userInfo.id}`) : '' }}</span>
                  </div>
                </div>
                </Col>
                <Col span="12">
                <div class="address-item">
                  <span class="label">{{ $t('transport.postcode') }}</span>
                  <span class="value">{{ addressInfo.postalCode }}</span>
                </div>
                </Col>
              </Row>
            </div>
            <div v-else class="noLogin">
              {{ $t('transport.getWarehouseAddress') }}
            </div>
          </div>
        </div>


        <!-- <div v-if="userToken"> -->
        <div class="inquire">
          <div class="title ff-bold">
            <span class="setp-second">2、</span>
            {{ $t('transport.hint2', { appName: appName }) }}
          </div>
          <user-shipping-address ref="userShipRef" @on-change="onSelectAddr"
            addressType="confirm"></user-shipping-address>
          <div :class="userToken ? '' : 'place-sty'">
            <div class="inquire-content">
              <Row :gutter="16">
                <Col span="12">
                <span class="label">
                  <span>*</span>
                  {{ $t('transport.trackingNumber') }}
                  <span class="label-tips ff-regular">{{ $t('transport.label_tips') }}</span>
                </span>
                </Col>
                <Col span="11">
                <span class="label">{{ $t('transport.parcelName') }}</span>
                </Col>
                <Col span="1">
                </Col>
              </Row>
              <Row v-for="(item, index) in orderParamItemList" :key="index" class="row-gutter" :gutter="16">
                <Col span="12">
                <Input v-model="item.expressNo" :placeholder="$t('transport.enterTrackingNumber')" />
                </Col>
                <Col span="11">
                <Input v-model="item.parcelName" :placeholder="$t('transport.enterPackageName')" />
                </Col>
                <Col span="1">
                <div v-if="index != 0" @click="removeOrder(index)" class="iconfont icon-shanchu"></div>
                </Col>
              </Row>
              <div @click="addOrder" class="add-btn">{{ $t('transport.add_parcel') }}</div>
            </div>
            <!-- 遮罩 -->
            <div v-if="!userToken" class="mask-area"></div>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <!-- <Divider /> -->
        <div class="footer-wrapper">
          <div>
            <Checkbox v-model="agree">
              {{ $t('personal.agree') }}
              <span class="pink-text">《{{ $t('transport.freeStatement') }}》</span>
            </Checkbox>
          </div>
          <!-- <div class="tooltip">
                <span class="tooltip-content" @click="escapePopup = !escapePopup">
                  {{ $t('transport.freeStatement') }}
                </span>
              </div> -->
          <div class="btn-wrap">
            <div @click="onBack" class="cancel-btn">{{ $t('public.cancel') }}</div>
            <div @click="onSubmit" class="confirm-btn">{{ $t('transport.submit') }}</div>
          </div>
        </div>
        <!-- </div> -->
      </div>

      <Modal class="pop" class-name="vertical-center-modal" width="480" v-model="confirmPopup"
        :title="$t('transport.transshipmentOrderConfirmation')">
        <div class="pop-label">{{ $t('transport.hint3') }}</div>
        <div class="pop-label">{{ $t('transport.hint4') }}</div>
        <div slot="footer">
          <Button @click="confirmPopup = false">
            {{ $t('public.cancel') }}
          </Button>
          <Button @click="onCreateTransOrder" :loading="loading" type="primary">
            {{ $t('public.confirm') }}
          </Button>
        </div>
      </Modal>
      <Modal class="pop" class-name="vertical-center-modal" width="480" v-model="successPop"
        :title="$t('transport.viewOrder')">
        <div class="pop-label">{{ $t('transport.myOrderPageViewOrder') }}</div>
        <div slot="footer">
          <Button @click="successPop = false">{{ $t('public.cancel') }}</Button>
          <Button type="primary" @click="toUserOrder">
            {{ $t('public.confirm') }}
          </Button>
        </div>
      </Modal>

      <t-agreement v-if="agreement && userToken" :id="agreement.id" @confirm="confirmAgreement" @close="closeAgreement"
        v-model="escapePopup"></t-agreement>

      <rules-pop-one ref="oneRef" @closeEmit="close" @confirmEmit="confirm"></rules-pop-one>
    </div>
  </div>
</template>

<script>
import { validateAddressRequired, addressExamineRepetition } from "@/common/common";
import { expressOrderAddressList } from "@/api/expressOrder";
import { createTransOrder } from "@/api/order";
import { mapState } from "vuex";
import TAgreement from "@/components/t-agreement";
import TTransferFlow from "@/components/t-transfer-flow.vue";
import userShippingAddress from "@/views/main/submit-parcel/user-shipping-address";
import RulesPopOne from '../user/components/rules-pop-one.vue';
export default {
  name: "transport",
  components: { TAgreement, TTransferFlow, userShippingAddress, RulesPopOne },
  data() {
    return {
      agree: false,
      escapeId: '',
      escapePopup: true, // 免责弹窗
      consentAgreement: false, // 同意协议
      confirmPopup: false, // 确认弹窗
      successPop: false, // 成功弹窗
      loading: false,
      userToken: localStorage.getItem('USER_TOKEN'),
      orderParamItemList: [
        {
          parcelName: '',
          remarks: '',
          expressNo: ''
        }
      ],
      info: '', // 协议内容
      addressId: '', // 收货地址id
      appName: process.env.VUE_APP_NAME,
      addressInfo: '', // 地址信息
      imgList: [
        {
          id: 0,
          imgUrl: require('@/assets/images/icons/icon_transport_1.png'),
          text: this.$t('routerTitle.confirmOrder'),
          dashed: true,
          currentText: false,
        },
        {
          id: 1,
          imgUrl: require('@/assets/images/icons/icon_transport_2.png'),
          text: this.$t('user.submitParcel'),
          dashed: false,
          currentText: true,
        },
        {
          id: 2,
          imgUrl: require('@/assets/images/icons/icon_transport_3.png'),
          text: this.$t('home.paymentFreight'),
          dashed: false,
          currentText: false,
        },
        {
          id: 3,
          imgUrl: require('@/assets/images/icons/icon_transport_4.png'),
          text: this.$t('home.wait_goods'),
          dashed: false,
          currentText: false,
        }
      ],
      addressDataInfo: {}
    }
  },
  computed: {
    ...mapState({
      agreement: (state) => {
        // 用户协议
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_TRANSFER_DISCLAIMER;
        }
        return obj;
      },
      userInfo: state => state.user.userInfo
    })
  },
  created() {
    if (this.userToken) this.getExpressOrderAddressList();
  },
  methods: {
    onSelectAddr(info) {
      this.addressDataInfo = info;
      this.addressId = info.id;
    },
    closeAgreement(bol) {
      this.$router.go(-1);
      this.consentAgreement = bol;
    },
    confirmAgreement(bol) {
      this.consentAgreement = bol;
    },
    onCopy() {
      // 复制地址
      let _this = this;
      let address = `${this.addressInfo.recipientName} +${this.addressInfo.regionCode} ${this.addressInfo.mobile} ${this.addressInfo.countryText} ${this.addressInfo.provinceText} ${this.addressInfo.cityText} ${this.addressInfo.areaText} ${this.addressInfo.addressDetail}${this.userInfo.id ? (this.userInfo.id.length > 8 ? `-u${this.userInfo.id.slice(-8)}` : `-u${this.userInfo.id}`) : ''} ${this.addressInfo.postalCode}`;
      this.$copyText(address).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    toUserOrder() {
      // 前往我的订单
      this.successPop = false;
      this.$router.push('/user/order');
    },
    onBack() {
      // 后退
      this.$router.go(-1);
    },
    addOrder() {
      // 添加包裹
      this.orderParamItemList.push({
        parcelName: '',
        expressNo: ''
      })
    },
    removeOrder(index) {
      // 删除当前订单
      this.orderParamItemList.splice(index, 1);
    },
    filterList() {
      // 查看是否有快递单号没有填写
      return this.orderParamItemList.filter((item) => {
        return item.expressNo == '';
      });
    },
    onSubmit() {
      if (!this.consentAgreement) {
        this.escapePopup = true;
        return;
      }
      if (this.filterList().length > 0) {
        this.$Message.error(this.$t('transport.addTrackingNumber'));
        return false;
      }
      if (!this.agree) {
        this.$Message.error(this.$t('pay.check'));
        return;
      }

      // 地址必填校验
      if (!validateAddressRequired(this.addressDataInfo)) {
        this.$refs.oneRef.open(this.$t('user.no_data_pop_text'), this.$t('user.close'), this.$t('submitParcel.edit'), 2);
        return;
      }

      addressExamineRepetition(this.addressDataInfo, false, 'order').then(() => {
        this.confirmPopup = true;
      }).catch((err) => {
        let str = '';
        if (err.val) {
          str = this.$t(err.text, { val: err.val });
        } else {
          str = this.$t(err.text);
        }
        this.$refs.oneRef.open(str, this.$t('submitParcel.edit'), this.$t('user.submitOrder'));
      })
    },
    onCreateTransOrder() {
      // 提交转运订单
      this.loading = true;
      createTransOrder({
        addressId: this.addressId,
        orderParamItemList: this.orderParamItemList,
        remarks: this.remarks
      }).then((res) => {
        this.$Message.success(this.$t('transport.submitSSuccess'));
        this.successPop = true;
        this.confirmPopup = false;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    getExpressOrderAddressList() {
      // 获取官方收获地址
      expressOrderAddressList().then((res) => {
        this.addressInfo = res.result;
      })
    },
    // 关闭 其他无操作，仅关闭
    confirm(e, v) {
      if (e == 1) {
        setTimeout(() => {
          this.confirmPopup = true;
        }, 1000)
      } else {
        this.$refs.userShipRef.editAddress(this.addressDataInfo);
      }
    },
    close(e, v) {
      if (e == 1) {
        this.$refs.userShipRef.editAddress(this.addressDataInfo);
      }
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .page-bg {
    background: #FFFFFF;
    margin-top: 24px;
    padding-top: 32px;

    .content {
      margin: 0 160px;

      .shipping-address {


        .shipping-title {
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 40px 0;

          .trans-icon {
            width: 36px;
            height: 36px;
            background: #FFEEF4;
            border-radius: 5px 5px 5px 5px;
            padding: 6px 5px 5px 4px;
          }

          .label {
            font-size: 24px;
            color: #2F333A;
            line-height: 23px;
          }
        }

        .title-address {
          font-size: 18px;
          color: #2F333A;
          line-height: 21px;
          display: inline-flex;
          align-items: center;

          justify-content: space-between;
          width: 100%;

          .copy-btn {
            display: inline-flex;
            height: 32px;
            padding: 7px 12px 7px 16px;
            justify-content: flex-end;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            border-radius: 8px;
            border: 1px solid #F1F1F1;
            color: #FF186B;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
          }
        }

        .current-address {
          position: relative;
          margin-top: 32px;

          .bg-border {
            display: block;
            width: 100%;
            height: 218px;
          }

          .default-bg {
            display: block;
            width: 100%;
            height: 93px;
          }

          .address-info {
            // position: absolute;
            padding: 34px 30px 30px;
            border-radius: 8px;
            background: #F5F5F5;
            background-image: url('@/assets/images/icons/bg-border.png');
            background-position: left top;
            background-repeat: no-repeat;
            background-size: contain;
            margin-bottom: 40px;

            .address-head {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20px;

              .top-label {
                font-weight: 600;
                font-size: 18px;
                color: #333333;
                line-height: 21px;
              }

              .copy-btn {
                padding: 5px 18px;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #FF186B;
                font-weight: 600;
                font-size: 16px;
                color: #FF186B;
                line-height: 27px;
                cursor: pointer;
              }
            }

            .address-item {
              margin-bottom: 23px;

              .label {
                width: 100%;
                font-weight: 400;
                font-size: 14px;
                color: #969696;
                line-height: 19px;
                display: block;
                margin-bottom: 8px;
              }

              .value {
                font-weight: 400;
                font-size: 14px;
                color: #000;
                line-height: 19px;
              }
            }
          }
        }
      }

      .alert {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 12px 16px;
        font-weight: 400;
        font-size: 14px;
        color: #FF186B;
        line-height: 21px;
        border-radius: 8px;
        background: #FFE8F0;
      }

      .inquire {
        margin-bottom: 40px;

        .title {
          font-size: 18px;
          color: #333333;
          line-height: 21px;
          display: inline-flex;
          align-items: center;
          margin-bottom: 20px;

        }

        .inquire-content {
          border-radius: 8px;
          background: #F5F5F5;
          border: 1px solid #E9EAF3;
          padding: 30px;
          margin-top: 20px;

          .label {
            font-size: 14px;
            color: #2F333A;
            line-height: 19px;
            display: block;
            margin-bottom: 10px;

            span {
              color: #FF186B;
            }

            .label-tips {
              font-weight: 400;
              font-size: 14px;
              color: #74767F;
              line-height: 16px;
              margin-left: 17px;
            }
          }

          .row-gutter {
            margin-bottom: 32px;

            :deep(.ivu-input) {
              height: 50px;
              background: #FFFFFF;
              border-radius: 8px 8px 8px 8px;
              border: 1px solid #D4D9EF;
              padding-left: 12px;
              font-size: 16px;
            }

            .iconfont {
              font-size: 32px;
              color: #74767F;
              cursor: pointer;
            }
          }

          .add-btn {
            width: 100%;
            border: 1px dashed #FF186B;
            border-radius: 8px;
            font-size: 14px;
            color: #FF186B;
            line-height: 21px;
            text-align: center;
            cursor: pointer;
            height: 40px;
            line-height: 38px;
          }
        }

        .place-sty {
          position: relative;

          .mask-area {
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #FFFFFF;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.6;
            cursor: not-allowed;
          }

          .inquire-content {
            background: #F7F9FC;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #E9EAF3;
            padding: 40px 32px;
            margin-top: 24px;

            .label {
              font-weight: 600;
              font-size: 16px;
              color: #333333;
              line-height: 19px;
              display: block;
              margin-bottom: 39px;

              span {
                color: #FF186B;
              }

              .label-tips {
                font-weight: 400;
                font-size: 14px;
                color: #74767F;
                line-height: 16px;
                margin-left: 17px;
              }
            }

            .row-gutter {
              margin-bottom: 32px;

              :deep(.ivu-input) {
                height: 59px;
                background: #FFFFFF;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #D4D9EF;
                padding-left: 12px;
                font-size: 16px;
              }

              .iconfont {
                font-size: 32px;
                color: #74767F;
                cursor: pointer;
              }
            }

            .add-btn {
              width: 100%;
              padding-top: 19px;
              padding-bottom: 15px;
              border: 2px dashed #FF186B;
              border-radius: 8px;
              font-weight: 600;
              font-size: 18px;
              color: #FF186B;
              line-height: 21px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }

      .footer-wrapper {
        padding-top: 24px;
        padding-bottom: 80px;
        border-top: 1px solid #F1F1F1;

        :deep(.ivu-checkbox-wrapper) {
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
          margin-bottom: 20px;
          height: 20px;

          .ivu-checkbox {
            margin-right: 10px;
            margin-top: 3px;
          }
        }

        .pink-text {
          color: #FF186B;
        }

        // .tooltip {
        //   margin-bottom: 20px;

        //   .tooltip-content {
        //     cursor: pointer;
        //   }
        // }

        .btn-wrap {
          font-weight: 400;
          font-size: 19px;
          color: #F21573;
          line-height: 22px;
          display: flex;
          gap: 24px;
          align-items: center;

          .cancel-btn {
            padding: 16px 56px;
            border-radius: 6px;
            border: 1px solid #FF186B;
            cursor: pointer;
            width: 50%;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
          }

          .confirm-btn {
            padding: 16px 56px;
            border-radius: 6px;
            background: #FF186B;
            border: 1px solid #FF186B;
            color: #FFFFFF;
            cursor: pointer;
            width: 50%;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
    }

    .noLogin {
      position: absolute;
      top: 30px;
      text-align: center;
      left: 0;
      right: 0;
      font-weight: 500;
      font-size: 18px;
      color: #FF186B;
      line-height: 21px;
    }
  }

  .pop {
    .pop-label {
      margin-bottom: 8px;
      color: @t-text-color;
      font-size: 14px;

      span {
        color: @primary-color;
      }

    }
  }
}
</style>